<template>
  <span class="text" :style="{ fontSize: size ? `${size}px` : '', color: color }" @click="jumpDetail">{{ text }}</span>
</template>

<script setup>
/**
 * inviteCode:用户邀请码
 * text: 文字内容
 * userId: 用户ID
 * color：文字颜色
 * size：文字字号
 */

defineOptions({ name: 'MsUser' })
const router = useRouter()
const props = defineProps({
  text: {
    default: '',
    require: true,
    type: [String, Number]
  },
  inviteCode: {
    default: '',
    require: false,
    type: [String, Number]
  },
  userId: {
    default: '',
    require: false,
    type: String
  },
  color: {
    default: `#165dff`,
    require: false,
    type: String
  },
  size: {
    default: 14,
    require: false,
    type: Number
  }
})

const jumpDetail = () => {
  const path = '/userChannel/userDetail'
  if (props.inviteCode) {
    router.push({
      path: path,
      query: {
        inviteCode: props.inviteCode
      }
    })
  } else if (props.userId) {
    router.push({
      path: path,
      query: {
        id: props.userId
      }
    })
  }
}
</script>

<style scoped>
.text:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>
